/*

1. Gameboard
    1.1. Gameboard boardtile
        1.1.1. Gameboard boardtile img 
    1.2 Gameboard checkpoint
        1.2.1 Gameboard checkpointNumber
    1.3. Gmaeboard tileimage 
    1.4. Gameboard sideobject
    1.5. Gameboard imgFacing
    1.6. Gameboard effects
    1.7. Gameboard robot

2. GameInput 
    2.1. GameInput card

3. RobotStatus
    3.1. RobotStatus text
    3.2. RobotStatus health
    3.3. RobotStatus life
    3.4. RobotStatus power down
    3.5. RobotStatus power down button

4. Registers
    4.1. Regsiters cardSlots
    4.2. Regsiters titleBar
    4.3. Regsiters registerNumber
    4.4. Regsiters locked
    
5. Hand
    5.1. Hand cardSlot

6. Ready

*/


/* 1. Gameboard*/
#gameboard { margin: 0 auto; overflow: hidden; }
    /* 1.1. Gameboard boardtile */
    #gameboard .boardtile { float: left; border-left: 1px solid #ccc; border-top: 1px solid #ccc; }
        /* 1.1.1. Gameboard boardtile img */
        #gameboard .boardtile img { position: absolute; }
    /* 1.2. Gameboard checkpoint */
    #gameboard .checkpoint { }
        /* 1.2.1. Gameboard checkpointNumber */
        #gameboard .checkpointNumber { display: inline; font-size:15px; font-weight:bold; position:absolute; margin:0px 0px; cursor:default; -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
    /* 1.3. Gmaeboard tileimage */
    #gameboard .tileImage { position: absolute; z-index: 1; }
    /* 1.4. Gameboard sideobject */
    #gameboard .sideobject{ z-index: 7; position: absolute; }
    /* 1.5. Gameboard imgFacing */
    #gameboard .imgFacingLeft { position: inherit; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
    #gameboard .imgFacingTop { position: inherit; }
    #gameboard .imgFacingRight { position: inherit; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
    #gameboard .imgFacingBottom { position: inherit; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }
    /* 1.6. Gameboard effects */
    #gameboard .staticEffect { z-index: 4; position: absolute; }
    #gameboard .effect { z-index: 5; position: absolute; }
    /* 1.7. Gameboard robot */
    #gameboard .robot { z-index: 3; position: absolute; }
        #gameboard #robotRespawn { z-index:3; position:inherit; }

/* 2. GameInput */
#gameInput { overflow: hidden; margin: 10px auto; }
    /* 2.1. GameInput card */
    #gameInput .cardText { padding: 105px 0px 0px 0px; margin: 0px auto; color: #000000; font-family: "Impact"; text-align:center; }
    #gameInput .card { width: 100px; height: 150px; }
    #gameInput .cardType { position: absolute; width: 100px; height: 150px; z-index: -1; }

/* 3. RobotStatus */
#robotStatus { overflow: hidden; width: 632px; margin: 10px auto; background-color: #696969; }
        /* 3.1. RobotStatus text */
        #robotStatus .text { margin: 0px; font-family: "Impact"; }
        /* 3.2. RobotStatus health */
        #robotStatus .healthDiv { float: left; width: 240px; height: 54px; }
        #robotStatus .health { margin: 2px; float: left; width: 20px; height: 30px; }
        /* 3.3. RobotStatus life */
        #robotStatus .livesDiv { margin-left: 50px; float: left; width: 102px; height: 54px; }
        #robotStatus .life { margin: 2px; float: left; width: 30px; height: 30px; }
        /* 3.4. RobotStatus power down */
        #robotStatus .powerDownDiv { margin-left: 50px; float: left; width: 190px; height: 54px; }
        #robotStatus .powerDownFalse { float: left; width: 100px; margin: 0px; font-family: "Impact"; color: #00CC00; }
        #robotStatus .powerDownInitiate { float: left; width: 100px; margin: 0px; font-family: "Impact"; color: #DDDD00; }
        #robotStatus .powerDownTrue { float: left; width: 100px; margin: 0px; font-family: "Impact"; color: #FF0000; }
        /* 3.5. RobotStatus power down button */
        #robotStatus .powerDownButton { float: right; padding: 6px; margin: 0px; font-family: "Impact"; }

/* 4. Registers */
#registers { overflow: hidden; width: 500px; margin: 10px auto; }
    /* 4.1. Regsiters cardSlots */
    #registers .cardSlot { float: left; width: 100px; height: 170px; }
    /* 4.2. Regsiters titleBar */
    #registers .titleBar { width: 100px; height: 20px; background-color: #222222; }
    /* 4.3. Regsiters registerNumber */
    #registers .registerNumber { margin: 0px 5px; float: left; color: #FF0000; font-family: "Impact"; }
    /* 4.4. Regsiters locked */
    #registers .locked { margin: 0px 5px; float: right; color: #FFFF00; font-family: "Impact"; }

/* 5. Hand */
#hand { margin: 10px auto; height: 150px; }
    /* 5.1. Hand cardSlot */
    #hand .cardSlot { float: left; width: 100px; height: 150px; }

/* 6. Ready */
#ready { overflow: hidden; margin: 10px auto; }
    #ready a {  }
